<template>
    <div v-if="ready">
        <div v-if="info.type == 1">
            <iframe :src="info.url" id="game-iframe">
            </iframe>
        </div>
        <div v-else>
            <YvBtn color="#7755aa" :reverse="true" id="goHrefBtn" @click="goBack">返回列表</YvBtn>
            <div id="game-sq">
                <span class="errorfont">Game Window Reject</span>
                <br>
                {{ info.title }}由于开发者限制
                <br>
                未允许本站使用内联Iframe
                <br>
                请点击下方按钮跳转到玩家后台页面
                <br>
                有任何疑问请联系若雨 Q 3097411322
            </div>
            <YvBtn id="goHrefBtn" @click="goHref">开始《{{ info.title }}》游戏</YvBtn>
        </div>
    </div>

    <div class="no-game" v-else>
        加载失败，游戏KEY : {{ keyw }}不存在
        <YvBtn @click="goBack">
            返回列表
        </YvBtn>
    </div>
</template>

<script>
import { get } from '@/js/request'
export default {
    name: 'gameIfame',
    created() {
        console.log(this.$route.query.keyword);
        this.keyw = this.$route.query.keyw;
        this.getInfo();
        let timer = setInterval(() => {
            if (this.ready) {
                console.log("请求成功：正在去除定时器");
                clearInterval(timer);
            } else {
                this.getInfo();
            }
        }, 2000);
    },
    data() {
        return {
            ready: false,
            keyw: 'G1',
            info: {}
        }
    },
    methods: {
        getInfo() {
            get('/anon/game/query?key=' + this.keyw).then(res => {
                if (res.code == 200) {
                    this.info = res.result;
                    if (res.result) {
                        this.ready = true;
                    }
                    else {
                        this.ready = false;
                    }
                }
            }).catch(ex => {
                console.log(ex);
            })
        },
        goBack() {
            this.$router.push('/game');
        },
        goHref() {
            window.open(this.info.url);
        }
    },
}
</script>

<style scoped>
body {
    margin: 0;
}

#game-iframe {
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 99.7vh;
}

.no-game {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: absolute;
    font-size: 16pt;
}

.no-game>* {
    margin: 30pt;
}

.errorfont {
    color: rgb(255, 95, 95);
}

#game-sq {
    font-size: 10pt;
    text-align: center;
    margin: 20pt auto;
    z-index: 9;
    line-height: 16pt;
}

#goHrefBtn {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-top: 20pt;
    padding: 8pt 12pt;
}

.errorfont {
    color: rgb(255, 95, 95);
    font-size: 18pt;
    line-height: 36pt;
}
</style>